<template>
    <div class="registercontainer">
        <el-form class="registerForm" :model="registerModel" ref="registerFormRef" :inline="false" :rules="rules"
            size="medium">
            <el-form-item>
                <div class="registerTitle">智慧鱼缸项目</div>
            </el-form-item>
            <el-form-item prop="username">
                <el-input placeholder="请设置6~18位账户" v-model="registerModel.username"></el-input>
            </el-form-item>
            <el-form-item prop="realname">
                <el-input placeholder="请设置输入真实姓名" v-model="registerModel.realName"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
                <el-input placeholder="请设置输入电话号码" v-model="registerModel.phone"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请设置6~18位密码" v-model="registerModel.password"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请确认密码" v-model="registerModel.password2"></el-input>
            </el-form-item>
            <el-form-item>
                <el-row :gutter="20" style="margin-top: 10px;width: 100%;">
                    <el-col :span="12">
                        <!-- 这里点击注册按钮就发数据 -->
                        <el-button class="mybtnRight" @click="register" size="large">注册</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { useRegister } from '@/composables/register/useRegister'
import useBaseRegister from '@/composables/register/useBaseRegister'
// registerModel是表单数据，rules表单规则，registerFormRef表单属性
const { registerModel, rules, registerFormRef } = useBaseRegister();
// 交给useRegister验证，这里要传密码和确认密码
// const { register } = useRegister(registerModel);//registermodel是表单的数据
const { register } = useRegister(registerModel);//把表单数据发出去
</script>
<style scoped lang="scss">
.registercontainer {
    background-image: url('@/assets/bac.jpg');
    background-size: 100% 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .registerForm {
        position: relative;
        min-height: 260px;
        width: 350px;
        border-radius: 10px;
        padding: 20px 35px;
        box-shadow: 0 0 25px #cac6c6;
        background-color: white;

        .image {
            width: 100%;
            height: 30px;
            cursor: pointer;
        }

        .registerTitle {
            width: 100%;
            font-size: 24px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mybtnLeft {
            width: 100%;
        }

        .mybtnRight {
            width: 100%;
            margin-left: 10%;
        }
    }
}
</style>